<script lang="ts" setup>
import Transformer from '@/components/Transformer.vue'
import Switch from '@/components/Switch.vue'
import CableDistributionBox from '@/components/CableDistributionBox.vue'
import TransferPowerSupply from '@/components/TransferPowerSupply.vue'
import 'element-plus/dist/index.css'
import {
    RemoveFilled,
    Plus,
    Minus,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { reactive } from 'vue'

const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const min = ref(true)
// 使用计算属性来动态切换图标
const MinIcon = computed(() => (min.value ? Minus : Plus));
const onmin = () => {
  min.value = !min.value;
  console.log(min.value);
  console.log(min);
};
</script>

<template>
    <vue-draggable-resizable :drag-handle="'.drag-handle'">
        <div class="common-layout">
            <el-container>
            <el-header class="drag-handle">
                <img class="hander-children" style="width: 25px; height: 25px;" src="/public/128.png">
                </img>
                <el-text class="hander-children" size="large">参数输入</el-text>
                <el-button class="hander-children" size="small" type="primary" :icon="MinIcon" circle @click="onmin"/>
            </el-header>
            <el-main :style='{display:min? "unset":"none"}'>
              <el-tabs v-model="activeName" :stretch="true" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="台区" name="first">
                  <Transformer />
                </el-tab-pane>
                <el-tab-pane label="柱上开关" size="small" name="second">
                  <Switch />
                </el-tab-pane>
                <el-tab-pane label="电缆分接箱" name="third">
                  <CableDistributionBox />
                </el-tab-pane>
                <el-tab-pane label="转供电" name="fourth">
                  <TransferPowerSupply />
                </el-tab-pane>
              </el-tabs>
            </el-main>
            </el-container>
        </div>
    </vue-draggable-resizable>
</template>

<style scoped>
.common-layout {
    border-radius:10px;
    /* border: 1px solid; */
    box-shadow: -2px 2px 2px 2px #888888;
    width:fit-content;
    height: fit-content;
    background-color: rgb(200, 217, 231);
}
.el-header{
    height: 45px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dfdfdf;
    cursor: move;
    align-items: center;
    user-select: none;
    -moz-user-select: -moz-none;
    background-color: aliceblue;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.hander-children{
  padding: 5px;
}
.el-main{
    background-color: #FFFFFF;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.demo-tabs > .el-tabs__content {
  margin: 0%;
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>